<template>
	<div class="image-box">
		<!--预览区-->
		<div>
			<div v-if="showData.imageList && showData.imageList.length > 0 && showData.imageList[0].url"
				class="image-view-box" :class="'ad-view-' + showData.type">
				<div v-if="showData.type === '1'"
					:style="{ 'margin': `${showData.styleMargin}px`, 'padding-bottom': `${showData.stylePadding}px`, }">
					<img v-for="(item, index) in showData.imageList" :key="index" style="display: block" :src="item.url"
						alt="">
				</div>
				<div v-for="(item, index) in showData.imageList" v-else :key="index" class="image-view-item"
					:style="{ backgroundImage: `url(${item.url})`, 'border-radius': showData.cornerStyle == '2' ? '10px' : '0px' }" />
			</div>
			<div v-else class="image-view-item">
				<div class="image-title">
					建议宽度为750像素
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
	props: {
		showData: {
			type: Object as any,
		},
	},
	setup() {
		return {};
	},
});
</script>

<style scoped lang="scss">
.image-box {
	.cursor {
		cursor: pointer;
		font-size: 12px;
		color: #fff;

		&.color {
			color: #2c3e50;
		}
	}

	img {
		width: 100%;
		user-select: none;
	}

	.image-view-box {
		position: relative;
		overflow: hidden;

		&.ad-view-2,
		&.ad-view-3 {
			white-space: nowrap;
			display: -webkit-box;

			.image-view-item {
				width: 100%;
			}
		}

		&.ad-view-3 {
			.image-view-item {
				width: 40%;
			}
		}


	}

	.image-view-item {
		position: relative;
		height: 135px;
		overflow: hidden;
		font-size: 12px;
		background-color: #ebf8fd;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		color: #88c4dc;
		text-align: center;

		.image-title {
			line-height: 135px;
		}


	}
}
</style>
